<h3>basic</h3>
<div class="example-box" cdkDrag>
  Drag me around<br/>
  <!-- 锁定拖拽方向：cdkDragLockAxis="y"或cdkDragLockAxis="x"
  默认竖直方向，若要水平，则设置：cdkDropListOrientation="horizontal"
  如要禁用某一条拖拽：[cdkDragDisabled]="true"
  条目是否可被拖入：[cdkDropListEnterPredicate]="isAllowed" -->
</div>

<h3>with boundary</h3>
<div class="example-boundary">
  <div class="example-box" cdkDragBoundary=".example-boundary" cdkDrag>
    I can only be dragged within the dotted container
  </div>
</div>

<h3>droplist</h3>
<div class="example-container">
  <h2>To do</h2>
  <div
    cdkDropList
    #todoList="cdkDropList"
    [cdkDropListData]="todo"
    [cdkDropListConnectedTo]="[doneList]"
    class="example-list"
    (cdkDropListDropped)="drop($event)">
    <div class="example-box-list" *ngFor="let item of todo" cdkDrag>{{item}}</div>
  </div>
</div>
<div class="example-container">
  <h2>Done</h2>
  <div
    cdkDropList
    #doneList="cdkDropList"
    [cdkDropListData]="done"
    [cdkDropListConnectedTo]="[todoList]"
    class="example-list"
    (cdkDropListDropped)="drop($event)">
    <div class="example-box-list" *ngFor="let item of done" cdkDrag>{{item}}</div>
  </div>
</div>

<h3>with handle</h3>
<div class="example-box" cdkDrag>
  I can only be dragged using the handle
  <div class="example-handle" cdkDragHandle>
    <svg width="24px" fill="currentColor" viewBox="0 0 24 24">
      <path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"></path>
      <path d="M0 0h24v24H0z" fill="none"></path>
    </svg>
  </div>
</div>

<h3>with custom preview</h3>
<div cdkDropList class="example-list" [cdkDropListData]="movies" (cdkDropListDropped)="drop($event)">
  <div class="example-box-list" *ngFor="let movie of movies" cdkDrag>
    {{movie.title}}
    <img *cdkDragPreview [src]="movie.poster" [alt]="movie.title">
  </div>
</div>

<h3>with drag placeholder</h3>
<div cdkDropList class="example-list" [cdkDropListData]="movies" (cdkDropListDropped)="drop($event)">
  <div class="example-box-list" *ngFor="let movie of movies" cdkDrag>
    <div class="example-custom-placeholder" *cdkDragPlaceholder></div>
    {{movie.title}}
  </div>
</div>
